<template>
    <div class="fixed right-8 bottom-8 z-50">
        <!-- 客服按钮 -->
        <div class="bg-blue-500 w-12 h-12 rounded-full flex items-center justify-center cursor-pointer shadow-lg hover:bg-blue-600 transition-colors"
            @click="showDialog = true">
            <el-icon class="text-white text-2xl !text-white"><Service /></el-icon>
        </div>

        <!-- 客服弹窗 -->
        <el-dialog v-model="showDialog" title="联系客服" width="360px" align-center>
            <div class="flex flex-col items-center p-4">
                <img src="@/assets/images/qrcode.jpg" alt="客服二维码" class="w-48 h-48 mb-4">
                <p class="text-gray-600 text-sm">扫描二维码添加客服微信</p>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Service } from '@element-plus/icons-vue'

const showDialog = ref(false)
</script>